<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>MyWeb</title>
    <base href="/" />
    <!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet" />
    <link href="MyWeb.Client.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <div id="loading">
            <div class="triangle-wrapper">
                <div class="triangle triangle-1"></div>
                <div class="triangle triangle-2"></div>
                <div class="triangle triangle-3"></div>
                <div class="triangle triangle-4"></div>
                <div class="triangle triangle-5"></div>
                <p class="triangle-loading">Loading</p>
            </div>
        </div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script>
        (() => {
            const $triangles = document.querySelectorAll('.triangle');
            const template = `<svg class="triangle-svg" viewBox="0 0 140 141">
		    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		      <polygon class="triangle-polygon"  points="70 6 136 138 4 138"></polygon>
		    </g>
		  </svg>`;

            Array.prototype.forEach.call($triangles, ($triangle, index) => {
                $triangle.innerHTML = template;
            });
        })();

    </script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
<style>
    #loading {
        position:relative;
        top:50%;
        align-items: center;
        background: #000;
        display: flex;
        height: 100vh;
        width:100vw;
        justify-content: center;
    }

    @keyframes grow-and-fade {
        0% {
            opacity: 0;
            transform: scale(0.1) translate(0);
        }

        40% {
            opacity: 1;
        }

        60% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            transform: scale(1) translate(0);
        }
    }

    @keyframes pulsing-fade {
        0% {
            opacity: 0;
        }

        20% {
            opacity: 0;
        }

        40% {
            opacity: 0.8;
        }

        60% {
            opacity: 0;
        }
    }

    .triangle {
        animation: grow-and-fade 2000ms linear infinite;
        height: 150px;
        left: 0;
        opacity: 0;
        width: 150px;
        position: absolute;
        top: 0%;
        transform: translate(0);
        transform-origin: 50% 60%;
        will-change: opacity, transform;
    }

    .triangle-wrapper {
        height: 150px;
        position: relative;
        width: 150px;
    }

    .triangle-loading {
        animation: pulsing-fade 6000ms ease infinite;
        color: white;
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 300;
        left: 50%;
        letter-spacing: 8px;
        margin-left: 4px;
        margin-top: 10px;
        opacity: 0;
        position: absolute;
        top: 100%;
        transform: translate3d(-50%, -50%, 0);
        text-transform: uppercase;
    }

    .triangle-svg {
        margin-top: -20px;
        opacity: 0.5;
        overflow: visible;
    }

    .triangle-polygon {
        stroke-width: 5px;
    }

    .triangle-1 {
        animation-delay: 0ms;
    }

        .triangle-1 .triangle-polygon {
            stroke: hotpink;
        }

    .triangle-2 {
        animation-delay: 400ms;
    }

        .triangle-2 .triangle-polygon {
            stroke: aqua;
        }

    .triangle-3 {
        animation-delay: 800ms;
    }

        .triangle-3 .triangle-polygon {
            stroke: cornflowerblue;
        }

    .triangle-4 {
        animation-delay: 1200ms;
    }

        .triangle-4 .triangle-polygon {
            stroke: yellow;
        }

    .triangle-5 {
        animation-delay: 1600ms;
    }

        .triangle-5 .triangle-polygon {
            stroke: white;
        }

</style>